<template>
    <n-space>
        <n-select
            placeholder="筛选班级"
            v-model:value="classId"
            :options="classIdOptions"
        />
        <n-select
            placeholder="筛选实训"
            v-model:value="trainingId"
            :options="trainingIdOptions"
        />
        <n-select
            placeholder="筛选学生"
            v-model:value="studentId"
            :options="studentIdOptions"
        />
    </n-space>
    <n-data-table
        :columns="columns"
        :data="dataRef"
        :bordered="false"
        :row-key="rowKey"
        children-key="task_analysis"
    />
    <personal-grade-modal
        ref="personalGradeModalRef"
    />
</template>

<script setup>
import workApi from "@/http/workApi";
import PersonalGradeModal from "@/components/teacher/模态框/PersonalGradeModal.vue";
import {useTeacherStore} from "@/stores/teacher";

const teacher = useTeacherStore()
const personalGradeModalRef = ref(null)
const props = defineProps(['addBreadcrumbList', "training_id", "class_id", "student_id"])
const columns = [
    // {
    //     title: "项目名称",
    //     key: "name",
    //     width: "20%"
    // },
    {
        title: "任务名称",
        key: "task_name",
        width: "20%"
    },
    {
        title: "任务进展",
        key: "task_progress",
        width: "20%"
    },
    {
        title: "分数",
        key: "task_score",
        width: "20%"
    },
    {
        title: "操作",
        key: "op",
        render(row) {
            if ("task_name" in row) {
                return h(
                    "span",
                    {
                        strong: true,
                        tertiary: true,
                        size: "small",
                        onClick: () => clickDetails(row)
                    },
                    {default: () => "查看详情"}
                );
            }
        }
    },
]
const dataRef = ref([])
const rowKey = (row) => {
    if ("name" in row) {
        return "project-" + row.name
    } else return "task-" + row.task_name

}
const getGrade = (training_id, student_id) => {
    workApi.get("teacher/student_score", {
        params: {
            training_id,
            student_id
        }
    }).then(r => {
        console.log(r.data)
        dataRef.value = r.data
    })

}
getGrade(props.training_id, props.student_id)
const clickDetails = (row) => {
    personalGradeModalRef.value.setShowModel(true, {...row, student_id: props.student_id})
}

// 筛选框
const classId = ref(props.class_id)
const trainingId = ref(props.training_id)
const studentId = ref(props.student_id)

// 监视筛选框
watch(classId, () => {
    trainingId.value = trainingIdOptions.value[0].value
})
watch([trainingId,studentId], () => {

    teacher.updateClassGrade(trainingId.value, classId.value)
    getGrade(trainingId.value, studentId.value)
})


// 计算出筛选框
const classIdOptions = computed(() => {
    let array = []
    for (let i of teacher.allGrade) {
        array.push(
            {label: i.training_class, value: i.class_id}
        )
    }
    return Array.from(new Set(array.map(JSON.stringify)), JSON.parse);
})
const trainingIdOptions = computed(() => {
    let array = []
    for (let i of teacher.allGrade) {
        if (classId.value !== null && classId.value !== i.class_id) {
            continue
        }
        array.push(
            {label: i.name, value: i.id}
        );
    }
    return Array.from(new Set(array.map(JSON.stringify)), JSON.parse);
})
const studentIdOptions = computed(() => {
    console.log(teacher.classGrade)
    let array = []
    let is_in = false
    for (let i of teacher.classGrade) {
        array.push(
            {label: i.name, value: i.id}
        );
        if (i.id === studentId.value) { // 当前学生是否在其中
            is_in = true
        }
    }
    if (!is_in) { // 不在其中则选学生中第一位作为默认学生
        studentId.value = array[0].value;
    }
    return Array.from(new Set(array.map(JSON.stringify)), JSON.parse);
})
</script>

<style scoped lang="less">

</style>